<template>
  <div>
    <el-dialog title="设置用户数据范围"
               @close="closeAdd"
               :visible.sync="dialogTableVisible"
               width="60%"
               :append-to-body="true">
      <div class="data-auth-area-container">
        <el-form :model="requestParams"
                 ref="requestParams"
                 label-width="110px">
          <el-row>
            <el-col :span="10"
                    class="left-tree">
              <!-- 人员库组织架构树 -->
              <LibraryPeOrgTree :assignedNode.sync="assignNode"
                                :checkbox="true"
                                :isSupportOpera.sync="isSupportOpera"
                                :nodeIdsArr.sync="nodeIdsArr"
                                :companyNamesArr.sync="comNamesArr"
                                :assignedTemplateNode.sync="assignTemplateNode"
                                :assignedPermissionNode.sync="assignPermissionNode"
                                :curMenu.sync="selectedNode"></LibraryPeOrgTree>
            </el-col>

            <el-col :span="4"
                    class="opera-style">
              <el-button type="primary"
                         @click="saveAddEvaluate">>></el-button>
            </el-col>
            <el-col :span="10">
              <p class="judge-job-person">数据权限范围</p>
              <div class="ul-box-style">
                <ul>
                  <li v-for="(item,i) in dataAuthRange"
                      :key="i">
                    <p :title="item.node_name"
                       v-if="item.id">{{item.node_name}}</p><span v-if="item.id"
                          @click="onDelClick(item,i)">x</span>
                  </li>
                </ul>
              </div>
            </el-col>
            <el-col :span="24"
                    class="bottom-box-opera">
              <el-button @click="cancelEvaluate">关 闭</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import treeTransfer from 'el-tree-transfer' // 引入
import LibraryPeOrgTree from './LibraryPeOrgTree'
import { backEvaluateApi } from '@/services/ProjectCenter'
export default {
  components: {
    LibraryPeOrgTree,
    treeTransfer,//树形空梭框
  },
  props: {
    callBackFunc: Function,//设置用户数据范围的回调函数
    pageDataAuthVisible: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    objRow: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      isSupportOpera: false,//操作框不展示
      nodeIdsArr: [],
      comNamesArr: [],
      dataAuthRange: [],//数据范围
      toData: [],
      requestParams: {
        eva_person: false
      },
      // 当前选择的组织树节点数据
      selectedNode: {},
      // 右键分配权限时选中的节点
      assignPermissionNode: {},
      // 右键分配模板时选中的节点
      assignTemplateNode: {},
      // 右键分配人员时选中的节点
      assignNode: {},
      addRequestParam: {
        page: 1,
        page_size: 10,
      },
      addEvaluateList: {
        list: [{}, {}, {}],
        total_count: 0
      },
      //选中的list
      getRowKeys (row) {
        //记录每行的key值
        return row.person_id;
      },
      dialogTableVisible: false,
      startrequestParam: {
        comp_id: '',
      }
    }
  },
  methods: {
    delPerson (row, i) {//删除人员
      backEvaluateApi.cancelEmpower({
        data: {
          id: row.id
        }
      }).then((res) => {
        if (res.code == 0) {
          this.getPowerListByUserId();//刷新
          this.callBackFunc();//回调函数
          this.$message.success('操作成功')
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    onDelClick (item, i) {//删除
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        left: true
      }).then(() => {
        this.delPerson(item, i);//删除人员
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    cancelEvaluate () {//取消
      this.initResetCommonFunc();//初始化通知函数
    },
    initResetCommonFunc () {//初始化通知函数
      this.addRequestParam = this.$options.data().addRequestParam;//重置     
      this.addOrgan = this.$options.data().addOrgan;//重置
      this.$emit('update:pageDataAuthVisible', false);
    },
    getNodeArr () {
      let arr = [];
      console.log('保存-comNamesArr=', this.comNamesArr)
      if (this.comNamesArr.length > 0) {
        this.comNamesArr.forEach(ele => {
          arr.push({
            node_id: ele.node_id,
            node_type: ele.node_type
          })
        })
      };
      return arr;
    },
    saveAddEvaluate () {//确定
      backEvaluateApi.empower({
        data: {
          // user_ids: ids
          user_ids: this.objRow.user_id,
          node: this.getNodeArr()
        }
      }).then((res) => {
        if (res.code === 0) {
          this.getPowerListByUserId();//刷新
          this.callBackFunc();//回调函数
          this.$message.success('添加成功');
        }
      }).catch(err => {
        console.log(err);
      })
    },
    //关闭弹窗
    closeAdd () {
      this.$emit('update:pageDataAuthVisible', false);
      this.$emit('update:objRow', {});
      this.checkIds = [];
      this.initResetCommonFunc();//初始化通知函数
    },
    getNodeIds (arr) {
      let idsArr = [];
      if (arr.length > 0) {
        arr.map((item) => {
          idsArr.push(item.node_id_desc)
        })
      }
      return idsArr;
    },
    getPowerListByUserId () {//数据授权-权限设置-显示
      backEvaluateApi.getPowerListByUserId({
        params: {
          user_id: this.objRow.user_id,
          is_page: 0
        }
      }).then((res) => {
        this.comNamesArr = res.data.list;
        this.dataAuthRange = res.data.list;
        this.nodeIdsArr = this.getNodeIds(this.dataAuthRange);//回显
        // console.log('回显res=', res)
      }).catch((error) => {
        console.log(error)
      })
    },
  },
  watch: {
    nodeIdsArr: {
      handler (n, o) {
        // console.log('w-nodeIdsArr=', n, 'comNamesArr=', this.comNamesArr)
      }
    },
    pageDataAuthVisible (n, o) {
      if (n == true) {
        this.getPowerListByUserId();
      }
      this.dialogTableVisible = n;
    }
  },
  created () {
    if (this.pageDataAuthVisible == true) {
      this.getPowerListByUserId();
    }
    this.dialogTableVisible = this.pageDataAuthVisible;
  }
}
</script>

<style lang="scss" scoped>
.data-auth-area-container {
  .bottom-box-opera {
    text-align: center;
    margin-top: 20px !important;
  }
  .opera-style {
    height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .judge-job-person {
    padding-left: 20px;
    height: 40px;
    line-height: 40px;
    color: white;
    background-color: rgba(129, 211, 248, 1);
  }
  .ul-box-style {
    width: 100%;
    height: 340px;
    overflow-y: auto;
    margin-top: 20px;
    ul {
      li {
        padding: 0px 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 40px;
        line-height: 40px;
        p {
          /* 强制不换行 */
          white-space: nowrap;
          /* 文字用省略号代替超出的部分 */
          text-overflow: ellipsis;
          /* 匀速溢出内容，隐藏 */
          overflow: hidden;
          padding-right: 12px;
        }
        span {
          cursor: pointer;
        }
      }
      // li:hover {
      //   background: rgba(#81d3f8, 0.5);
      //   color: white;
      // }
    }
  }
  .person-list-margin {
    margin-bottom: 20px;
  }
}
</style>